var game = document.querySelector(".game2")
var key = document.getElementById("key2")
var submit = document.getElementById("submit2")

//测试一下输出：submit.onclick = function(){alert(key.value);}
for(var hang=1;hang<=4;hang++){
    for(var lie=1;lie<=4;lie++){
        var temp_div = document.createElement("div");

        temp_div.className = "kuai2";
        temp_div.setAttribute("hang", hang);
        temp_div.setAttribute("lie", lie);
        temp_div.setAttribute("color", "black");
        temp_div.setAttribute("border", "white");
        temp_div.innerText = "("+hang+","+lie+")";
        game.appendChild(temp_div);
    
        /*temp_div.addEventListener("click",()=>{
            var click_hang = temp_div.getAttribute("hang");
            var click_lie = temp_div.getAttribute("lie");
            console.log(click_hang, click_lie);
        })*/
        //我不清楚是哪里出了问题，感觉是循环结束了才会有temp_div，不然不会只输出（2,2）
        
        temp_div.onclick = function () {
            var click_hang = this.getAttribute("hang");
            var click_lie = this.getAttribute("lie");
            //console.log(click_hang, click_lie);   成功，字符串自动变成数字
            //获取当前点击元素的行和列
      
            //当前元素变色
            if (this.getAttribute("color") == "black") {
              this.style.background = "white";
              this.style.border = "1px solid black";
              this.setAttribute("color", "white");
              this.setAttribute("border", "white");
            } else {
              this.style.background = "black";
              this.style.border = "1px solid white";
              this.setAttribute("color", "black");
              this.setAttribute("border", "black");
            }
      
            var all_kuai = document.querySelectorAll(".game2>div");
            //获取文档中所有class = game>div的全部元素    如果没有>div那么就不会循环？？？
      
            for (var i = 0; i < all_kuai.length; i++) {
              var temp_hang = all_kuai[i].getAttribute("hang");
              //getAttribute：返回一个属性
              var temp_lie = all_kuai[i].getAttribute("lie");
      
              var up_kuai = temp_hang == click_hang - 1 && temp_lie == click_lie;
              var down_kuai =
                temp_hang == click_hang - 0 + 1 && temp_lie == click_lie;
              var left_kuai = temp_hang == click_hang && temp_lie == click_lie - 1;
              var right_kuai =
                temp_hang == click_hang && temp_lie == click_lie - 0 + 1;
              //一定要先减去0再加上1
      
              //上方块的判断,当前块是点击块的上边
              //下方块的判断,当前块是点击块的下边
              //左边块的判断,当前块是点击块的左边
              //右边块的判断,当前块是点击块的右边
      
              if (up_kuai || down_kuai || left_kuai || right_kuai) {
                if (all_kuai[i].getAttribute("color") == "black") {
                  all_kuai[i].style.background = "white";
                  all_kuai[i].style.border = "1px solid black";
                  all_kuai[i].setAttribute("color", "white");
                  all_kuai[i].setAttribute("border", "black");
                } else {
                  all_kuai[i].style.background = "black";
                  all_kuai[i].style.border = "1px solid white";
                  all_kuai[i].setAttribute("color", "black");
                  all_kuai[i].setAttribute("border", "white");
                }
              }
          }
          var flag = 1;
          for (var j = 0; j < all_kuai.length; j++) {
              if (all_kuai[j].getAttribute("color") == "black") {
                flag = 0;
              }
          }

          if(flag == 1) alert("请输入：520");
        }
    }
}

submit.onclick = function ()
{
    if (key.value == "bierenshuxiaoguliang") alert("下一关");
    window.location.href = "game_3.html";  //网页的跳转
};   //可以不用function里面套上submitClick
